<template lang="html">
  <div class="news">
    <top-header/>
    <div class="w1200">
        <div class="tab-tit TABLIST">
          <div class="tab-list active">2017</div>
          <div class="tab-list tab-list2">2016</div>
          <div class="search fr">
            <input type="text" placeholder="输入关键字"><div class="hk-btn search-btn"></div>
          </div>
        </div>
        <div class="TABCON">
          <div class="tab-con">
            <!-- <waterfall :line-gap="300" :watch="this.$store.state.news.news">
            <waterfall-slot
              v-for="(item, index) in this.$store.state.news.news"
              :width="item.width"
              :height="item.height"
              :order="index"
              :key="item.id"
            >
            <div class="con">
              <div class="imgBox">
                <img :src="item.img" alt="">
              </div>
              <div class="in-tit ellipsis">{{item.tit}}</div>
              <div class="in-txt">{{item.txt}}</div>
              <div class="detail">Read more <i class="icon r-right-s"></i></div>
            </div>
            </waterfall-slot>
          </waterfall> -->
            <!-- <div class="demo">
              <ul class="grid grid1">
                <li class="grid-item grid-item1" v-for='item in this.$store.state.news.news'>
                  <router-link to="#">
                    <div class="con">
                      <div class="imgBox">
                        <img v-lazy="item.img" alt="">
                      </div>
                      <div class="in-tit ellipsis">{{item.tit}}</div>
                      <div class="in-txt">{{item.txt}}</div>
                      <div class="detail">Read more <i class="icon r-right-s"></i></div>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div> -->
          </div>
          <!-- <div class="tab-con">
            <div class="demo">
              <ul class="grid grid1">
                <li class="grid-item grid-item1">
                  <a href="newsDetail5.html">
                    <div class="con">
                      <div class="in-tit">从线下到线上，律师们正在“互联网化”</div>
                      <div class="in-txt">在2017年正式上线运作的 “解忧小二”对外宣布，将在国内业务覆盖十大重点城市 ...</div>
                      <div class="detail">Read more <i class="icon r-right-s"></i></div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div> -->
        </div>
        <div class="more">Load More</div>
      </div>
      <bot-footer/>
  </div>
</template>

<script>
import topHeader from '../header/header.vue';
import botFooter from '../footer/footer.vue';
// import Waterfall from 'vue-waterfall/lib/waterfall';
// import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
export default {
  components:{
    topHeader,
    botFooter,
    // Waterfall,
    // WaterfallSlot
  }
}
</script>

<style lang="less">
@import "news.less";
</style>
